
<template>
		<div ref="fullscreenElement">
			 <Modelheader @clearData="clearData" @autotypeDate="autotypeDate" :examStatus="examStatus"></Modelheader>
			 <div>
				 <div class="cropperBox">
					<div class="cropperImageset">
						<!-- @wheel.prevent="handleWheel"
							@keydown="handleKeyDown"
							@keyup="handleKeyUp" -->
						<div ref="zoomContainer"
							class="zoom-container"
							>
							<div :style="contentStyle">
								<ImageSelector ref="childComponent" @isDrawingChange="isDrawingChange"
								 @newRectangle="newRectangle" :drawStatus="drawStatus" :pagevale="pagevale" :imageUrllist="modelenews" @modeltype="modeltype" :modelarealistcavans="modelarealistcavans" @refreshdata="refreshdata" @objbasicparameters="objbasicparameters"/>
								<div class="selectquestionitemHover" v-if="selectquestionitemIshow" :style="{width:selectquestionitem.width+'px',height:selectquestionitem.height+'px',background:'rgba(255,0,0,0.4)',position:'absolute',left:selectquestionitem.x+'px',top:selectquestionitem.y+'px',zIndex:1000}"></div>
								<div v-if="selectquestionitemIshow">
									<template v-if="selectquestionitem.examTemplateFieldList!=null">
										<div v-for="item in selectquestionitem.examTemplateFieldList" :style="{width:item.width+'px',height:item.height+'px',background:'rgba(16,255,0,0.4)',position:'absolute',left:item.x+'px',top:item.y+'px',zIndex:1001}"></div>
									</template>
								</div>
							</div>
						</div>
					</div>
					
					<div class="templatePage">
						<div v-for="(item,index) in modelenews" :key="index" :class="pagevale-1==index?'hover imgbox':'imgbox'" @click="changeImage(index)">{{ index+1 }}</div>
					</div>
					 <div class="uploadcardInfo">
                        <h3>客观题</h3>
                        <div class="kgtboxscorll" ref="myElement">
							<div :class="bigquestionindex==index?'examnumbercontent hover':'examnumbercontent'" v-for="(item,index) in objectivelistdata" :key="item.id" @click="objectaddclite(item,6,index)">
								<b>{{ item.questionTypeName }}-{{item.questionNumber}}* {{item.direction==1?'横向':'纵向'}}* 满分*：{{item.fullScore}}分 <i :class="item.examTemplateFieldList&&item.examTemplateFieldList.length==item.optionCount?'hover':''">（{{item.examTemplateFieldList&&item.examTemplateFieldList.length==item.optionCount?'已框选':'未框选'}}）</i></b>
								<div class="nameexamnum">
									<ul class="examnumberset">
										<template v-for="(option, num) in optionArea" >
											<li v-if="num < item.optionCount" @click.stop="chooseoption(item.id,6,num,index,item,option)" :class="{'hover': isHovered(num,index)}">
												{{ option }}
											</li>
										</template>
										<!-- <li v-for="(item,index) in optionArea" v-if="index>item.optionCount">{{item}}</li> -->
									</ul>
									<div>
										<!-- <i>编辑</i> -->
										<span @click="objectivedelete(item.id)" v-if="examStatus==0">删除</span>
									</div>
								</div>
							</div>
						</div>
                        <div class="xinzeplxtbutton" v-if="examStatus==0">
                            <span @click="plxzobjgt">批量新增客观题</span>
                            <span @click="bactcheditobjgt">批量编辑客观题</span>
                        </div>
					 </div>
				 </div>
			 </div>
			 <!-- 批量新增客观题 -->
			  <Btchaddobjective v-if="addobjquestionIshow" @closeobjective="closeobjective" :questiontypelist="questiontypelist" :pagevale="pagevale" :objectivelistdata="objectivelistdata"></Btchaddobjective>
			  <!-- 批量编辑 -->
			   <Btcheditobjective v-if="editobjectivequestions" :objectivelistdata="objectivelistdata" @updateobjectivequestionssurebc="updateobjectivequestionssurebc" :questiontypelist="questiontypelist"></Btcheditobjective>
		</div>
</template>

<script>
import ImageSelector from '../../components/model/positioningarea.vue'  //切图
import Modelheader from '../../components/model/modelhead.vue'
import Btchaddobjective from '../../components/model/batchaddobjective.vue' //批量新增客观题
import Btcheditobjective from '../../components/model/editobjectively.vue' //批量编辑客观题
import {
	templateIdinfo,
	templateobjectiveDate,
	batchdeleteobjetive,
	basicinfoCanvasimg,
	addobjectquestion,
	bascInfodelete,
	basicQuestionTypeList
} from '../../api/paperinfo/paperinfo.js'
// import {questionlist} from "@/api/jcgl/txgl";
export default {
  name: 'App',
  data(){
	return{
		isDrawing: false,
 		scale: 1,
     	isCtrlPressed: false,
		isDragging: false,
		dragStartX: 0,
		dragStartY: 0,
		initialLeft: 0,
		initialTop: 0,
		navbar:[
			{
				name:'模板信息及上传',
				id:0,
			},
			{
				name:'水平定位',
				id:1,
			},
			{
				name:'定位区',
				id:2,
			},
			{
				name:'准考证号区',
				id:3,
			},
			{
				name:'客观题区',
				id:4,
			},
			{
				name:'主观题区',
				id:5,
			}
		],
        optionArea:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
        //  optionArea:['A','B','C','D'],
		tabnavindex:0,
		examclassify:'',
		examclassifylist:['条形码','涂点','手写'],
		examNumber:'',
		examNumberlist:[4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
		cardNumber:2,
		cardNumberlist:[2,4,6],
		cardColor:'',
		cardColorlist:['黑色','灰色','彩色'],
		examdpi:'',
		examdpilist:[150,200,300],
		images: [],
		questiontype:'',
		selectradio:1,
		fillinWidth:0,
		fillinHeight:0,
		intervalWidth:0,
		intervalHeight:0,
		modelobj:{
		  id:0,
		  examId:0,
		  examCourseId:0,
		  examNoLength:4,
		  answerCardPages:2,
		  status:0,
		  templateImages: []
		},
		moduleImageurl:{},
		templateId:'',//模板id
		examCourseId:'',//考试科目id
		modeldata:{
			templateId: 0,
			examCourseId: 0,
			templateAreaType:1
		},
		positioningare:{
			id: 0,
			templateId: 0,
			templateAreaType: 0,
			templateCuttingRegion:[]
		},
		modeltypequestion:[],
		modelarealist:[],
		modelarealistcavans:[],
		examInfo:{},
		editmodelishow:false,
		pagevale:1,
		modelenews:[],
		examName:'',
		telemplatelist:[],
		isFullscreen: false, // 当前是否处于全屏状态
        activeName: '1',
		addobjquestionIshow:false,
		objectivelistdata:[],
		editobjectivequestions:false,
		questiontypelist:[],
		clittype:'',
		clitname:'',
		bigquestionindex:-1,
		questionid:"",
		drawStatus:false,
		contentdraw:{},
		bigquestiontype:1,
		selectquestionitem:{},
		hoveredIndex: null, // 当前悬停的 index
		hoverindexclas:null,
		selectquestionitemIshow:false,
		smallquestionObj:{},
		examStatus:'',
		loadingishow:false
	}  
  },
  mounted() {
	// 监听全屏状态变化
	document.onfullscreenchange = this.handleFullscreenChange;
	setTimeout(() => {
		this.modeltab()
	},1000)
	this.modeltab()//获取模板图片
	this.getObjectivelist() //获取客观题列表
	this.getList()
	 // 添加全局点击监听
    this.focusContainer()
    // 确保在点击时也能获取焦点
    this.$refs.zoomContainer.addEventListener('click', this.focusContainer)
  },
  computed: {
    contentStyle() {
      return {
        transform: `scale(${this.scale})`,
        transformOrigin: '0 0',
        transition: 'transform 0.1s ease'
      }
    }
  },
  methods:{
	isDrawingChange(e){
		console.log(e,'修改了isDrawing');
		this.isDrawing = e
	},
	isHovered(num,index) {
		return this.hoveredIndex === num&&this.hoverindexclas === index;
	},
	objectaddclite(con,type,index){
		this.contentdraw = con
		this.drawStatus = true
		this.clittype=type
		this.clitname=con.questionNumber
		this.bigquestionindex = index
		this.questionid = con.id
		this.bigquestiontype = 1
		this.selectquestionitem = con
		console.info('con',con)
		this.selectquestionitemIshow = true
	},
	chooseoption(questionid,type,num,index,con,options){
		this.hoveredIndex = num
		this.hoverindexclas = index
		this.drawStatus = true
		this.bigquestiontype = 2
		this.questionid = questionid
		this.clittype=type
		this.clitname=options
		let objsmall = con.examTemplateFieldList.filter(item=>item.fieldName == options)
		this.smallquestionObj = objsmall[0]
	},
	//切图坐标点
	newRectangle(val) {
		console.info('val',val)
		if(this.bigquestiontype===1){
			this.contentdraw.x = val.x
			this.contentdraw.y = val.y
			this.contentdraw.width = val.width
			this.contentdraw.height = val.height
			delete this.contentdraw._isModified;
			addobjectquestion([this.contentdraw]).then((res)=>{
			    console.info(res)
				if(res.code==200){
					this.getObjectivelist()
					this.drawStatus = false
					this.selectquestionitemIshow = false
				}else{
					this.$message.error(res.msg)
				}
			})
		}else{
			let option={
				templateId:this.$route.query.templateId,
				page:this.pagevale,
				fieldType:this.clittype,
				fieldName:this.clitname,
				x:val.x,
				y:val.y,
				width:val.width,
				height:val.height,
				sort: 0,
				questionId:this.questionid

			}
			// console.info(option)
			basicinfoCanvasimg(option).then(res=>{
				console.info(res)
				if(res.code==200){
					this.getObjectivelist()
					this.drawStatus = false
					this.selectquestionitemIshow = false
				}else{
					this.$message.error(res.msg); 
				}
			})
		}
	},
	//单个删除objectivedelete
	objectivedelete(id){
		console.info(this.smallquestionObj,'ddddddd')
		if (this.smallquestionObj && Object.keys(this.smallquestionObj).length !== 0) {
			this.smalldeleteCon(this.smallquestionObj.id)
		}else{
			this.bigdeleteCon(id)
		}
	},
	//删除大题
	bigdeleteCon(id){
		this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            batchdeleteobjetive([id]).then(res => {
              if(res.code==200){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
				this.getObjectivelist()
              }
            })
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
        });
	},
	//删除小题
	smalldeleteCon(id){
	    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            bascInfodelete(id).then(res => {
              if(res.code==200){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
				this.getObjectivelist()
				this.selectquestionitemIshow = false
				this.smallquestionObj = {}
              }
            })
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
        });
	},
	getList() {
            basicQuestionTypeList({examSubjectId:this.$route.query.examId})
            .then((response) => {
                this.questiontypelist = response.rows.filter(question => question.subjectiveType === 2);
                // this.total = response.total;
            })
            .finally(() => {
                this.loading = false;
            });
        },
	// 根据字典值和字典类型查找对应的 label
    getMatchedLabel(value) {
		console.info('this.questiontypelist',this.questiontypelist)
      const matchedItem = this.questiontypelist.find(item => item.id == value)
	  console.info('matchedItem',matchedItem)
      return matchedItem ? matchedItem.questionName : undefined
    },
	//批量新增客观题
	plxzobjgt(){
		this.addobjquestionIshow = true
	},
	//保存客观题成功
	closeobjective(data){
		this.addobjquestionIshow = false
		if(data==1){
			//走一遍获取客观题接口
			this.getObjectivelist()
		}
	},
	//编辑保存
	updateobjectivequestionssurebc(data){
		this.editobjectivequestions = false
		if(data==1){
			//走一遍获取客观题接口
			this.getObjectivelist()
		}
	},
	//批量编辑展开
	bactcheditobjgt(){
		this.editobjectivequestions = true
	},
	autotypeDate(){
		this.getObjectivelist()
	},
	//获取客观题列表
	getObjectivelist(){
		this.loadingishow = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
		let obj={
			examTemplateId:this.$route.query.templateId,
		}
		templateobjectiveDate(obj).then(res=>{
		    console.info(res)
			if(res.code==200){
				const transformData = (data) => {
					return data.map(item => {
						// Create a shallow copy of the item
						const newItem = {...item};
						newItem.options = item.examTemplateFieldList
						
						return newItem;
					});
				};
				this.modelarealistcavans = transformData(res.data)
				.filter(item => item.page == this.pagevale)
				.map(item => ({
					...item,
					templatePointType:`${item.questionTypeName?item.questionTypeName:''} ${item.questionNumber}`,
				}));
				this.objectivelistdata = res.data.map(item => ({
					...item,
					_isModified: false, // 初始化时标记为未修改
				}));
				this.loadingishow.close()
			}else{
				this.$message({
					message: res.msg,
					type: 'warning'
				})
				this.loadingishow.close()
			}
		}).finally(()=>{
		    this.loadingishow.close()
		})
	},
    changeImage(index){
        this.pagevale = index+1
		this.getObjectivelist()
    },
    // 获取模板
	modeltab(){
        let obj={
            templateId:this.$route.query.templateId,
        }
        templateIdinfo(obj).then(res=>{
            console.info(res)
            if(res.code==200){
                this.modelenews = res.data
				this.positioningare.id = res.data.id
				this.examStatus = res.data&&res.data[0].editStatus
            }
        })
	},
	quiteclick(){
		this.$router.push('/examoverview')
	},
	canceleditbox(){
			this.editishow=false
			this.editmodelishow = false
	},
	objbasicparameters(){
		this.editishow=false
		this.editmodelishow = false
	},
	refreshdata(){
		this.modeltab()
	},
	modeltype(data){
		this.modeltypequestion.push(data)
	},
	clearData(){
		this.getObjectivelist()
	},
	pagevalueindex(val){
		this.pagevale = val
		this.modelinfo(this.templateId)
	},
	// 切换全屏
	toggleFullscreen() {
	  if (!document.fullscreenEnabled) {
	    alert("您的浏览器不支持全屏功能！");
	    return;
	  }
	
	  if (this.isFullscreen) {
	    // 退出全屏
	    document.exitFullscreen();
		this.$refs.fullscreenElement.style.overflow = 'auto';
	  } else {
	    // 进入全屏
	    this.$refs.fullscreenElement.requestFullscreen();
		this.$refs.fullscreenElement.style.overflow = 'auto';
	  }
	},
	// 处理全屏状态变化
	handleFullscreenChange() {
	  this.isFullscreen = !document.fullscreenElement;
	},
	handleClickOutside(event) {
      const target = this.$refs.myElement;
      if (target && !target.contains(event.target)) {
        // 点击的是外部
        this.hoverindexclas = null;
		this.hoveredIndex = null
		this.selectquestionitemIshow = false
      }
    },
	handleWheel(e) {
      if (!this.isCtrlPressed) return
      
      e.preventDefault()
      const delta = e.deltaY > 0 ? -0.1 : 0.1
      this.scale = Math.max(0.1, Math.min(3, this.scale + delta))
    },
    handleKeyDown(e) {
      if (e.ctrlKey) {
        this.isCtrlPressed = true
      }
    },
    handleKeyUp(e) {
      if (!e.ctrlKey) {
        this.isCtrlPressed = false
      }
    },
    focusContainer() {
      this.$refs.zoomContainer.focus()
    }
  },
  beforeDestroy() {
    // 组件销毁时移除监听，防止内存泄漏
    this.$refs.zoomContainer.removeEventListener('click', this.focusContainer)
  },
  components: {
    ImageSelector,Modelheader,Btchaddobjective,Btcheditobjective
  },
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
.header{
	padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 102px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
    width:480px;
	height:calc(100vh - 102px);
	background:#fff;
	position:relative;
    box-shadow: 0 4px 16px 0 #5572921a;
    overflow-y: auto;
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.uploadcardInfo h3{
	border-bottom:solid 1px #D8E4F0;
	padding:18px 24px 14px;
	color:#2A303B;
	font-weight:normal;
	margin:0;
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 102px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position:relative;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 102px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 480px);
	height:calc(100vh - 102px);
	overflow:scroll;
	position: relative
}
/* 纵向滚动条宽度 */
/* 纵向滚动条宽度 */
.cropperImageset::-webkit-scrollbar {
  width: 12px; /* 控制纵向滚动条的宽度 */
  height: 12px; /* 控制横向滚动条的高度 */
}

/* 横向滚动条高度 */
.cropperImageset::-webkit-scrollbar-thumb {
  height: 8px; /* 单独调整横向滚动条滑块高度 */
}

/* 滚动条轨道 */
.cropperImageset::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 滚动条滑块 */
.cropperImageset::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 6px;
}

/* 鼠标悬停时滑块样式 */
.cropperImageset::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .image-preview img{
	  box-sizing: border-box;
	  width: 150px;
	  height: 150px;
	  background: #FFFFFF;
	  border-radius: 10px;
	  text-align: center;
	  font-size:16px;
	  color:#295CFF;
	  cursor: pointer;
	  margin:22px;
  }
  .searchlist{
  	box-sizing: border-box;
  	width:auto;padding:0 40px;
  	display: flex;
  	justify-content: space-between;
  	height: 54px;
  	background: #FFFFFF;
  	border-radius: 10px;
  	padding:0 24px;
  	align-items: center;
  }
  .searchlist{
  	padding-left:20px;
  	display: flex;
  	align-items: center;
  	justify-content: left;
  }
  .searchlist a{
  	display: block;
  	color:#557292;
  	font-size:14px;
  	/* width:100px; */
  	text-align: center;
  	position: relative;
  	line-height:52px;
  	padding:0 15px;	
  }
  .searchlist a:hover,.searchlist a.hover{
  	color:#295CFF;
  }
  .searchlist a:hover::after,.searchlist a.hover::after{
  	content:'';
  	width: 24px;
  	height: 4px;
  	background: #295CFF;
  	border-radius: 2px;
  	position: absolute;
  	left:50%;
  	transform: translateX(-50%);
  	bottom:0;
  }
  .boxsetetid{
	  display: flex;
	  align-items: center;
  }
  .boxsetetid >>> .el-input__inner{
	  width:90px;
	  height:34px;
	  border-radius: 10px;
	  border: 1px solid #295CFF;
	  font-weight: 500;
	  font-size: 14px;
	  color: #295CFF;
  }
  .boxsetetid >>> .el-select .el-input .el-select__caret{
	  color: #295CFF
  }
  .boxsetetid >>> .el-input__icon{
	  line-height:34px;
  }
  .boxsetetid >>> .el-button{
	  padding:0;
	  width: 96px;
	  height: 34px;
	  background: #295CFF;
	  border-radius: 10px;
	  color:#fff;
	  line-height:34px;
	  margin:0 10px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
  .examnumberset{
    display: flex;
    align-items: center;
	flex-wrap: wrap;
    padding:0 0 0 20px;
  }
  .examnumberset li{
    width: 20px;
    height: 20px;
    border: 1px solid #295CFF;
    border-radius: 2px;
    text-align: center;
    line-height:20px;
    color:#1A48DB;
    cursor: pointer;
	margin:5px 10px 5px 0;
  }
  .examnumberset li:hover,.examnumberset li.hover{
    background:#1A48DB;
    color:#fff;
  }
  .examnumberset li.red{
    border:solid 1px #EC555A;
    color:#fff;
  }
  .examnumbercontent{
    padding-top:15px;
	cursor: pointer;
  }
  .examnumbercontent b{
    display: block;
    padding:1px 20px 0;
    font-size:14px;
    color:#5B6371;
    font-weight: normal;
  }
  .examnumbercontent b i{
	font-style:normal;
	color:#EC555A;
  }
  .examnumbercontent b i.hover{
	color:#27B787
  }
  .examnumbercontent:hover,.examnumbercontent.hover{
    background:#E8F0FA;
  }
  .nameexamnum{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right:20px;
  }
  .nameexamnum i{
    display: inline-block;
    width: 44px;
    height: 20px;
    background: #1A48DB;
    border-radius: 2px;
    line-height:20px;
    text-align: center;
    line-height:20px;
    font-size:12px;
    color:#fff;
    font-style:normal;
    cursor: pointer;
  }
  .nameexamnum span{
    display: inline-block;
    width: 44px;
    height: 20px;
    background: #EC555A;
    border-radius: 2px;
    line-height:20px;
    text-align: center;
    line-height:20px;
    font-size:12px;
    color:#fff;
    font-style:normal;
    margin-left:10px;
    cursor: pointer;
  }
  .nameexamnumul{
    display: flex;
    align-items: center;
    padding:0 0 0 20px;
    height:20px;
  }
  .titlebnumber{
    display: block;
    font-style:normal;
    font-size:14px;
    color:#5B6371;
    padding:0 0 0 20px;
    font-weight: normal;
  }
  .locationmark{
    padding-top:15px;
    cursor: pointer;
  }
  .locationmark:hover,.locationmark.hover{
    background:#E8F0FA;
  }
  .nameexamnumul li{
    width: 64px;
    height: 20px;
    border: 1px solid #1A48DB;
    border-radius: 2px;
    font-size:12px;
    color:#1A48DB;
    line-height:20px;
    text-align: center;
    margin-right:10px;
  }
   .nameexamnumul li.hover, .nameexamnumul li:hover{
       background:#1A48DB;
       color:#fff;
   }
   .nameexamnumul li.red{
       border:solid 1px #EC555A;
       color:#fff;
   }
  /* >>> .el-collapse-item__header, >>> .el-collapse, >>> .el-collapse-item__wrap{
    border:none
  } */
  .custom-title1{
    width:100%;
    border-bottom:solid 1px #5572921a;
    padding:15px 0;
    cursor: pointer;
  }
  .custom-title1 span,.custom-title span{
    font-size:16px;
    color:#2A303B;
  }
  .custom-title1 span.hover,.custom-title span.hover{
    color:#1A48DB
  }
   .custom-title1 span i,.custom-title span i{
    font-style:normal;
    color:#EC555A
   }
   .templatePage{
    position:fixed;
    left:24px;
    bottom:24px;
    z-index:10;
    display: flex;
    align-items: center;
  }
   .templatePage1{
	 position:fixed;
    right:500px;
    bottom:24px;
    z-index:10;
    display: flex;
    align-items: center;
  }
  .imgbox{
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #DEE1E7;
    border-radius: 2px;
    text-align: center;
    line-height:32px;
    font-size:14px;
    color:#557292;
    margin-right:14px;
    cursor: pointer;
  }
  .imgbox:hover,.imgbox.hover{
    background: #1A48DB;
    border-radius: 2px;
    color:#fff;
  }
  .xinzeplxtbutton{
    position:absolute;
    left:0;
    bottom:0;
    height:54px;
    background:#E8F0FA;
    display: flex;
    width:100%;
    align-items: center;
  }
  .xinzeplxtbutton span{
    display: inline-block;
    width: 126px;
    height: 34px;
    background: #1A48DB;
    border-radius: 4px;
    margin-left:14px;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    line-height:34px;
    cursor: pointer;
  }
  .xinzeplxtbutton span:last-child{
    border: 1px solid #1A48DB;
    border-radius: 4px;
    color:#1A48DB;
    background:none;
  }
  .kgtboxscorll{
	height:calc(100vh - 270px);
	overflow-y: auto;
  }
  .selectquestionitemHover span{
	display: block;
  }
</style>